<template>
  <div
    v-if="showPlay"
    class="fixed top-0 left-0 flex-center text-white w-full h-full backdrop-blur bg-[#00000050] z-30"
  >
    <div
      id="btnPlay"
      class="text-white cursor-pointer p-[10px_40px] rounded-full font-semibold bg-[var(--xm-color)]"
      @click="handlePlayBtn"
    >
      Play Now
    </div>
  </div>
  <a
    href="javascript:history.back()"
    class="fixed cursor-pointer left-0 top-[200px] z-20 flex items-center gap-[10px] bg-[#18191a] p-[5px] rounded-[0px_100px_100px_0px]"
  >
    <XMImg
      :src="backIcon"
      class="size-[20px] object-cover rounded-full"
    />
    <XMImg
      :src="icon"
      class="size-[20px] rounded-full object-cover"
    />
  </a>
  <iframe
    :src="game"
    frameborder="0"
    class="w-full h-screen"
  ></iframe>
  <XMAd
    :gamDefineSlot="gamConfig?.playMRV"
    :gamType="GamTypeEnum.手动激励广告"
  />
</template>

<script lang="ts" setup>
import backIcon from "~/public/img/back.svg";
import { useGA } from "~/composables/useGA";
import { useConfigStore } from "~/composables/useConfigStore";

const { gameId } = useRoute().query;
const { config, hostName } = useConfigStore();
const { gamConfig } = config.value;
const showPlay = ref<boolean>(true);
const { trackEvent } = useGA();
/** 获取游戏详情数据 */
const { data } = await useFetch<GameJson>("/api/getGameApi", {
  method: "POST",
  body: { hostName, gameId },
});
const { name, game, icon } = data.value || {};

trackEvent({
  eventName: "Play_Page_Show",
  params: {
    Game: name,
  },
});

/** 点击开始玩按钮 */
const handlePlayBtn = () => {
  showPlay.value = false;
  trackEvent({
    eventName: "Click_Play_Play",
    params: {
      Game: name,
    },
  });
};
</script>

<style scoped>
#btnPlay {
  animation: btnPlay 1s infinite;
}

@keyframes btnPlay {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>
